<template>
  <el-container class="home-container">
    <!-- header -->
    <el-header class="home-header">
      <div class="title">admin企业后台管理平台 <span @click="toggleHandler" class="toggle-btn iconfont icon-zhankai"></span></div>
      <div class="t-right">
        <ul>
          <li>
            <i class="iconfont icon-youxiang"></i>
            <span class="num">9</span>
          </li>
          <li>
            <i class="iconfont icon-iconset0218"></i>
            <span class="num orange">20</span>
          </li>
          <li>
            <i class="iconfont icon-qizhi"></i>
            <span class="num red">8</span>
          </li>
        </ul>
        <el-dropdown @command="handleCommand">
          <div class="info el-dropdown-link">
            <img class="avatar" src="~assets/img/code.png" alt="用户图像" />
            <p class="name">admin</p>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="info" icon="el-icon-user-solid"
              >个人信息</el-dropdown-item
            >
            <el-dropdown-item command="delete" icon="el-icon-delete"
              >清空缓存</el-dropdown-item
            >
            <el-dropdown-item command="loginout" icon="iconfont icon-tuichu"
              >安全退出</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <!-- aside -->
      <el-aside class="home-aside" :width=" collapse ? '64px':'200px'">
        <el-menu
          router :default-active="activePath" :collapse-transition="false" background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="collapse">
          <!-- 一级导航 -->
          <el-submenu :index="item.id+''" v-for="(item) in menuList" :key="item.id">
            <template slot="title">
              <!-- 图标 -->
              <i :class="iconObj[item.id]"></i>
              <!-- 文本 -->
              <span>{{item.authName}}</span>
            </template>
            <!-- 二级导航 -->
              <el-menu-item :index="subItem.path" v-for="(subItem) in item.children" :key="subItem.id" @click="setActivePath(subItem.path)">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{subItem.authName}}</span>
              </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- main主体区 -->
      <el-main class="home-main">
        <router-view></router-view>
      </el-main>
    </el-container>
    <el-dialog
      title="个人信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-container>
</template>

<script scoped>
import { getMenulist } from 'network/api/home.js'
export default {
  name: 'Home',
  data () {
    return {
      dialogVisible: false,
      menuList: [],
      iconObj: {
        125: 'iconfont icon-user',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-iconsp2',
        102: 'iconfont icon-yewudanju',
        145: 'iconfont icon-baobiao'
      },
      collapse: false,
      activePath: '' // 当前激活菜单
    }
  },
  created () {
    this.getMenu()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  components: {},
  methods: {
    async getMenu () {
      const res = await getMenulist()
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menuList = res.data
    },
    handleCommand (m) {
      // this.$message(m)
      switch (m) {
        case 'info':
          // 显示个人信息
          this.dialogVisible = true
          break
        case 'delete':
          // 清除缓存
          break
        case 'loginout':
          // 退出 删除token缓存，跳转至登录页面
          this.$confirm('此操作将退出系统, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            window.sessionStorage.removeItem('token')
            window.sessionStorage.removeItem('activePath')
            this.$router.push('/login')
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出'
            })
          })
          break
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    toggleHandler (e) {
      this.collapse = !this.collapse
    },
    setActivePath (path) {
      this.activePath = path
      window.sessionStorage.setItem('activePath', path)
    }
  }
}
</script>

<style lang='less' scoped>
.home-container {
  height: 100%;
  .home-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #00a65a;
    .title {
      font-size: 20px;
      color: #fff;
      font-weight: bold;
      .toggle-btn{
        margin-left: 40px;
        cursor:pointer;
      }
    }
    .t-right {
      display: flex;
      flex-direction: row;
      align-items: center;
      ul {
        display: flex;
        li {
          position: relative;
          margin-right: 30px;
          color: #fff;
          cursor: pointer;
          .iconfont {
            font-size: 20px;
          }
          .num {
            position: absolute;
            top: -8px;
            font-size: 12px;
            padding: 3px 4px;
            border-radius: 6px;
          }
          .orange {
            background-color: orange;
          }
          .red {
            background-color: red;
          }
        }
      }
      .info {
        display: flex;
        align-items: center;
        .avatar {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 13px;
        }
        .name {
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
  .home-aside {
    background-color: #2c3b41;
    /deep/ .el-menu{
      border:none;
    }
    .iconfont{
      color:#fff;
      margin-right: 20px;
    }
  }
  .home-main {
    background-color: #eaedf1;
  }
}
</style>
